<template>
	<view id="selector">
		<view class="filter">
			<view class="filter-item1">
				<view class="filter-sum1" v-if="status === 'unfinish'"></view>
				<view class="filter-sum2" v-else></view>
			</view>
			<view class="filter-item2">
				<text class="datetime" v-if="queryParam.cycleEnum === ''" @click="showDate = true">全部</text>
				<text class="datetime" v-if="queryParam.cycleEnum === 'TODAY'" @click="showDate = true">天</text>
				<text class="datetime" v-if="queryParam.cycleEnum === 'WEEK'" @click="showDate = true">周</text>
				<text class="datetime" v-if="queryParam.cycleEnum === 'MONTH'" @click="showDate = true">月</text>
				<u-icon name="arrow-down"></u-icon>
			</view>
		</view>
		<u-gap height="5" bgColor="#eee"></u-gap>
		<select-practitioner
			:placeholderText="placeholderText"
			:dataList="projectList"
			:fieldName="fieldName"
			:isSearch="false"
			@selectChange="selectChange"
		>
		</select-practitioner>
		<u-calendar :show="show" mode="range" @confirm="confirm" @close="close"></u-calendar>
		<!-- 时间选择 -->
		<u-picker
			:show="showDate"
			:columns="columnsDate"
			closeOnClickOverlay
			@confirm="onProConfirm"
			@cancel="onProCancel"
			@close="onClosePro"
		>
		</u-picker>
	</view>
</template>

<script>
	import {
		getAreaList,
		getChildren,
		getGroupList
	} from '@/api/global'
	import {
		AREA_ID
	} from '@/store/mutaction-types'
	export default {
		data() {
			return {
				show: false,
				placeholderText: '请输入项目名称查询',
				fieldName: 'projectName',
				fromUrl: '',
				toUrl: '',
				projectId: '',
				projectName: '',
				projectList: [],
				queryParam: {
					areaId: '',
					cycleEnum: ''
				},
				showDate: false,
				columnsDate: [
					['全部', '天', '周', '月']
				],
				filterTime: '全部',
				type: 0,
				status: 'all',
				sum: 0
			}
		},
		onLoad(option) {
			this.type = option.type
			this.status = option.status
			this.sum = option.sum
			this.queryParam.areaId = option.areaId
			this.queryParam.status = option.status
			this.queryParam.type = option.type
			this.queryParam.cycleEnum = option.cycleEnum
			uni.setNavigationBarTitle({
				title: option.areaName
			})
			// this.fromUrl = option.from
			// this.toUrl = option.to
		},
		onShow () {
			this.getProjectList()
		},
		methods: {
			getProjectList() {
				uni.showLoading({
					title: '数据加载中',
					mask: true
				})
				getGroupList(this.queryParam).then(res => {
					const data = res.data.data
					let projectList = []
					for (const k in data) {
						projectList = projectList.concat(data[k])
					}
					this.projectList = projectList
					uni.hideLoading()
					// this.isPop = false
				})
			},
			onTab(e) {
				this.tab = e
				if (e === 1) {
					this.placeholderText = '请输入区域名称查询'
				} else {
					this.placeholderText = '请输入项目名称查询'
				}
			},
			selectChange(e) {
				this.projectId = e.id
				this.projectName = e.projectName
				uni.navigateTo({
					url: '/packageD/list/list-by-project?projectId=' + 
					this.projectId + '&cycleEnum=' + 
					this.queryParam.cycleEnum + '&type=' + this.queryParam.type + '&status=' + 
					this.queryParam.status + '&projectName=' + this.projectName
				})
			},
			confirm(e) {
				this.queryParam.startTime = uni.$u.timeFormat(e[0], 'yyyy.mm.dd')
				this.queryParam.endTime = uni.$u.timeFormat(e[e.length - 1], 'yyyy.mm.dd')
				this.close()
				this.getProjectList()
			},
			close() {
				this.show = false
			},
			onProConfirm(e) {
				this.filterTime = e.value[0]
				const index = e.indexs[0]
				this.showDate = false
				if (index === 0) {
					this.queryParam.cycleEnum = ''
				} else if (index === 1) {
					this.queryParam.cycleEnum = 'TODAY'
				} else if (index === 2) {
					this.queryParam.cycleEnum = 'WEEK'
				} else {
					this.queryParam.cycleEnum = 'MONTH'
				}
				this.getProjectList()
			},
			onProCancel() {
				this.showIconDate = true
				this.showDate = false
			},
			onClosePro() {
				this.showIconDate = true
				this.showDate = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	#selector {
		.filter {
			padding: 20upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.filter-item1 {
				font-weight: bold;
				.filter-sum1 {
					color: $uni-color-error;
				}
				.filter-sum2 {
					color: $uni-color-success;
				}
			}
			.filter-item2 {
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>
